<template>
  <!--
  table用途：展示列表数据
  1. 使用el-table 往:data="list变量"
  2. 使用el-table-column（列组件）列数据由prop绑定列表行数据中的字段（属性）
 -->
  <div class="box">
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 四列 -->
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <!-- 新增一列=》展示一个按钮 -->
      <el-table-column label="操作">
        <!-- 1 . 通过默认插槽自定义列表的内容 -->
        <template>
          <!-- <h1>title</h1> -->
          <el-button type="primary">操作</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>

      <el-table-column label="性别">
        <!-- 2. 通过作用域插槽获取列表row(不能改名)数据=》实现一些功能（编辑、拿到ID跳转详情页、格式化数据）-->
        <template #default="{ row }">
          <p>获取当前行数据:{{ formatSex(row.sex) }}</p>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin: 20px">
      <!-- 分页
    1. background（true/false） 样式
    2. layout 控制分页布局

    3. :page-size 每页多少条数
    4. :total 列表数据的总数
    公式：total / page-size = 页数
     -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="1000"
        @current-change="changePage"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 列表数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        age: 18,
        sex: 1, // 1 男  2 女
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        age: 18,
        sex: 2,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        age: 18,
        sex: 1,
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    // 格式化性别
    // type 1 男 2 女
    formatSex (type) {
      /**
       * 1. 映射关系
       * 2. 根据映射获取对应的值
       */
      const maps = { 1: '男', 2: '女' }
      return maps[type]
    },
    // 分页回调
    // 点击页码执行
    changePage (page) {
      console.log('获取当前点击页面：', page)
      /**
       * 实际场景：根据page获取当前页数据
       * 1. 调用后台接口
       * 2. 修改data列表数据
       */
      this.tableData = [{
        date: '2016-05-01',
        name: '王小虎',
        age: 28,
        sex: 1,
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>
